<template>
	<div class="u-page u-general-color">
		<u-navbar :title="title" :background="background" :border-bottom="false" :title-bold="true"
			title-color="#040503" back-icon-color="#040503"></u-navbar>
		<section class="aui-flexView">
			<section class="aui-scrollView">
				<div class="aui-order-box">

					<!-- 基本信息 -->
					<div class="aui-flex aui-choice-white b-line u-font-bold u-pt-20 gap-container">
						<div class="gap-content">
							基本信息
						</div>
					</div>

					<!-- 用户id -->
					<div class="aui-flex aui-choice-white aui-mar15 b-line">
						<div class="aui-flex-box">平台ID</div>
						<u-input user-select='true' disabled="true" v-model="form.userId" input-align="right"
							placeholder="用户id" @longpress='longpressCopy(form.userId,"用户id已复制")'></u-input>
					</div>

					<!-- 微信昵称 -->
					<div class="aui-flex aui-choice-white b-line">
						<div class="aui-flex-box">平台昵称</div>
						<u-input disabled="true" v-model="form.userName" input-align="right" placeholder="微信昵称"
							@longpress='longpressCopy(form.NickName,"微信昵称已复制")'></u-input>
					</div>

					<!-- 手机号码 -->
					<div class="aui-flex aui-choice-white b-line">
						<div class="aui-flex-box">关联手机</div>
						<div class="u-text-right" v-if="form.phoneNumber">
							<u-input :disabled="basicFormDisabled" v-model="form.phoneNumber" input-align="right"
								placeholder="请填写手机号码" @longpress='longpressCopy(form.phoneNumber,"手机号码已复制")'></u-input>
						</div>
						<div class="u-text-right" v-else>
							-无-
						</div>
					</div>

					<!-- 真实姓名 -->
					<div class="aui-flex aui-choice-white b-line">
						<div class="aui-flex-box">真实姓名</div>
						<div>{{form.realName?form.realName:'-无-'}}</div>
					</div>

					<!-- 性别 -->
					<div class="aui-flex aui-choice-white b-line">
						<div class="aui-flex-box">性别</div>
						<div>{{form.sex?form.sex:'-无-'}}</div>
					</div>

					<!-- 年龄层 -->
					<div class="aui-flex aui-choice-white b-line">
						<div class="aui-flex-box">年龄层</div>
						<div>{{form.ageGroup?form.ageGroup:'-无-'}}</div>
					</div>

					<!-- 个人介绍 -->
					<div class="aui-flex aui-choice-white b-line">
						<div class="aui-flex-box">
							<div class="aui-flex-box">个人介绍</div>
							<div style="width: auto;margin-top: 10px;">
								<u-input v-model="form.introduction" :disabled="basicFormDisabled" type="textarea"
									maxlength="-1" height="100"></u-input>
							</div>
						</div>
					</div>

					<!-- 所在地区 -->
					<div class="aui-flex aui-choice-white b-line">
						<div class="aui-flex-box">所在地区</div>
						<div>{{form.region?form.region:'-无-'}}</div>
					</div>

					<!-- 所在街道 -->
					<div class="aui-flex aui-choice-white b-line">
						<div class="aui-flex-box">所在街道</div>
						<div>{{form.streetVillage?form.streetVillage:'-无-'}}</div>
					</div>

					<!-- 详细地址 -->
					<div class="aui-flex aui-choice-white b-line">
						<div class="aui-flex-box">
							<div class="aui-flex-box">详细地址</div>
							<div style="width: auto;margin-top: 10px;">
								<u-input v-model="form.address" :disabled="basicFormDisabled" type="textarea"
									maxlength="-1" height="100"></u-input>
							</div>
						</div>
					</div>

					<!-- 身份职业 -->
					<div class="aui-flex aui-choice-white b-line">
						<div class="aui-flex-box">身份职业</div>
						<div>{{form.identityJob?form.identityJob:'-无-'}}</div>
					</div>

					<!-- 月收入 -->
					<div class="aui-flex aui-choice-white b-line">
						<div class="aui-flex-box">月收入</div>
						<div>{{form.monthlyIncome?form.monthlyIncome:'-无-'}}</div>
					</div>
					<!-- 以上是基本信息 -->

					<!-- 区域服务商 -->
					<div v-if="regionalProvider_show == 1">
						<div v-if="provider.id">
							<div class="aui-flex aui-choice-white b-line u-font-bold u-pt-20 gap-container">
								<div class="gap-content">
									区域服务商
								</div>
							</div>
							<div>
								<!-- 服务类型 -->
								<div class="aui-flex aui-choice-white b-line">
									<div class="aui-flex-box">服务类型</div>
									<div>{{provider.storeType?provider.storeType:'-无-'}}</div>
								</div>

								<!-- 服务商名称 -->
								<div class="aui-flex aui-choice-white b-line">
									<div class="aui-flex-box">服务商名称</div>
									<div>{{provider.storeName?provider.storeName:'-无-'}}</div>
								</div>

								<!-- 区域编号 -->
								<div class="aui-flex aui-choice-white b-line">
									<div class="aui-flex-box">区域编号</div>
									<div>{{provider.providerId?provider.providerId:'-无-'}}</div>
								</div>

								<!-- 所在地区 -->
								<div class="aui-flex aui-choice-white b-line">
									<div class="aui-flex-box">所在地区</div>
									<div>{{provider.area?provider.area:'-无-'}}</div>
								</div>

								<!-- 所在街道 -->
								<div class="aui-flex aui-choice-white b-line">
									<div class="aui-flex-box">所在街道</div>
									<div>{{provider.street?provider.street:'-无-'}}</div>
								</div>

								<!-- 头像 -->
								<div class="aui-flex aui-choice-white b-line">
									<div class="aui-flex-box">头像</div>
									<div class="aui-flex-goods">
										<img :src="provider.storeAvatar" alt="">
									</div>
								</div>
							</div>
						</div>
					</div>

					<!-- 玫丽测评师 -->
					<div v-if="evaluation_show == 1">
						<div>
							<div class="aui-flex aui-choice-white b-line u-font-bold u-pt-20 gap-container">
								<div class="gap-content">
									玫丽测评师
								</div>
							</div>
							<div>
								<!-- 测评喜好【主】品类 -->
								<div class="aui-flex aui-choice-white b-line">
									<div class="aui-flex-box">测评喜好</div>
									<div class="u-flex u-col-center">
										<div class="u-scroll-x u-mr-5" style="width: 250rpx;"
											v-if="evaluator.mainCategory || evaluator.secondCategory">
											<u-tag v-for="(item, index) in evaluator.mainCategory.split(',')"
												:key="index" :text="item" type="info" mode="dark" size="mini"></u-tag>
											<u-tag v-for="(item, index) in evaluator.secondCategory.split(',')"
												:key="index" :text="item" type="info" mode="dark" size="mini"></u-tag>
										</div>
										<div v-else>-无-</div>
									</div>
								</div>

								<!-- 兴趣领域 -->
								<div class="aui-flex aui-choice-white b-line">
									<div class="aui-flex-box">兴趣领域</div>
									<div class="u-flex u-col-center">
										<div class="u-scroll-x u-mr-5" style="width: 450rpx;"
											v-if="evaluator.interests">
											<u-tag v-for="(item, index) in evaluator.interests.split(',')" :key="index"
												:text="item" type="info" mode="dark" size="mini"></u-tag>
										</div>
										<div v-else>-无-</div>
									</div>
								</div>

								<!-- 抖音平台 -->
								<div class="aui-flex aui-choice-white b-line">
									<div class="aui-flex-box">抖音平台</div>
									<div>{{ evaluator.tiktok ? evaluator.tiktok : '-无-' }}</div>
								</div>

								<div v-if="evaluator.tiktok == '有'">
									<div class="aui-flex aui-choice-white b-line">
										<div class="aui-flex-box">抖音粉丝数</div>
										<div>{{ evaluator.tiktokFans ? evaluator.tiktokFans : '-无-' }}</div>
									</div>

									<div class="aui-flex aui-choice-white b-line">
										<div class="aui-flex-box">抖音获赞数</div>
										<div>{{ evaluator.tiktokLikes ? evaluator.tiktokLikes : '-无-' }}</div>
									</div>
								</div>

								<!-- 小红书平台 -->
								<div class="aui-flex aui-choice-white b-line">
									<div class="aui-flex-box">小红书平台</div>
									<div>{{ evaluator.littleRedBook ? evaluator.littleRedBook : '-无-' }}</div>
								</div>

								<div v-if="evaluator.littleRedBook == '有'">
									<div class="aui-flex aui-choice-white b-line">
										<div class="aui-flex-box">小红书粉丝数</div>
										<div>{{ evaluator.littleRedBookFans ? evaluator.littleRedBookFans : '-无-' }}
										</div>
									</div>

									<div class="aui-flex aui-choice-white b-line">
										<div class="aui-flex-box">小红书获赞与收藏数</div>
										<div>{{ evaluator.littleRedBookLikes ? evaluator.littleRedBookLikes : '-无-' }}
										</div>
									</div>
								</div>

								<!-- 其他社交平台 -->
								<div class="aui-flex aui-choice-white b-line">
									<div class="aui-flex-box">
										<div class="aui-flex-box">其他社交平台</div>
										<div style="width: auto;margin-top: 10px;height: 150rpx;">
											<div>{{ evaluator.otherPlatforms ? evaluator.otherPlatforms : '-无-' }}</div>
										</div>
									</div>
								</div>

							</div>

						</div>
					</div>
				</div>
			</section>

			<div style="height: 100rpx;"></div>

			<div style="position: fixed;bottom: 0rpx;background-color: #fffbfe;width: 100%;z-index: 3;">
				<div>
					<div class="u-pt-20 u-pb-40" style="width: 90%;margin: 0 auto;height: 80px;">
						<div style="margin-top: 10px;">
							<u-button type="primary" shape="circle" :custom-style="customStyle" @click="this.goBack()">
								关闭
							</u-button>
						</div>
					</div>
				</div>
			</div>
		</section>

	</div>
</template>

<script>
	export default {
		data() {
			return {
				form: {},// 基本信息
				evaluator: {},// 测评师
				provider: {},// 区域服务商
				regionalProvider_show: 1, // 是否显示"区域服务商"，默认显示
				onlineProvider_show: 1, // 是否显示"线上服务商"，默认显示
				evaluation_show: 1, // 是否显示"玫丽测评师"，默认显示
				title: '个人资料',
				background: {
					backgroundColor: '#f3e4e9',
				},
				customStyle: {
					background: '#eb5468 !important'
				},
			};
		},

		onLoad(options) {

			// 未登录跳转到登录页面
			var loginRes = this.checkLogin()
			if (!loginRes) {
				return false;
			}

			// 是否显示"区域服务商"
			if (this.isNotNull(options.regionalProvider_show)) {
				this.regionalProvider_show = options.regionalProvider_show;
			}

			// 是否显示"玫丽测评师"
			if (this.isNotNull(options.evaluation_show)) {
				this.evaluation_show = options.evaluation_show;
			}

			if (this.evaluation_show == 1 && this.regionalProvider_show == 0) {
				this.title = "玫丽测评师资料";
			}

			if (this.regionalProvider_show == 1 && this.evaluation_show == 0) {
				this.title = "区域服务商资料";
			}

			if(this.isNotNull(options.partnerId)){
				// 获取基本信息
				this.getBasicInfo(options.partnerId);

				// 获取测评师资料
				this.getEvaluatorInfo(options.partnerId);

				// 获取区域服务商信息
				this.getProviderInfo(options.partnerId);
			}

		},

		methods: {

			/**
			 * 获取基本信息
			 */
			async getBasicInfo(partnerId) {
				let result = await this.$u.api.unifyMiniRestGet({
					systemid: "meily",
					url: "/customer/applet/info/" + partnerId,
					loading: true // 默认发起请求会有一个全局的Loading，设置false可去掉
				});
				if (result.code == 200) {
					if (this.isNotNull(result.data)) {
						this.form = result.data;
					}
				} else {
					this.$u.toast(result.msg)
					setTimeout(() => {
						this.goBack()
					}, 2500)
				}
			},

			/**
			 * 获取区域服务商信息
			 */
			async getProviderInfo(partnerId) {
				let result = await this.$u.api.unifyMiniRest({
					systemid: "meily",
					url: "/provider/info",
					userId: partnerId,
					loading: true // 默认发起请求会有一个全局的Loading，设置false可去掉
				});
				if (result.code == 200 && result.data) {
					this.provider = result.data;
				}
			},

			/**
			 * 获取测评师资料
			 */
			async getEvaluatorInfo(partnerId) {
				let result = await this.$u.api.unifyMiniRest({
					systemid: "meily",
					url: "/personalInfo/getPersonalInfo",
					userId: partnerId,
					loading: true // 默认发起请求会有一个全局的Loading，设置false可去掉
				});
				if (result.code == 200) {
					if (this.isNotNull(result.data)) {
						this.evaluator = result.data;
					}
				} else {
					this.$u.toast(result.msg)
					setTimeout(() => {
						this.goBack()
					}, 2500)
				}
			},

		},
	};
</script>

<style scoped>
	.gap-container {
		display: flex;
		align-items: center;
	}

	.gap-content {
		flex: 1;
	}

	.gap-icon {
		margin-left: auto;
	}

	.gap-save-btn {
		margin-left: auto;
		color: #eb5468;
	}

	aui-flexView {
		width: 100%;
		height: 100%;
		margin: 0 auto;
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-webkit-flex-direction: column;
		-ms-flex-direction: column;
		flex-direction: column;
	}

	.aui-scrollView {
		width: 100%;
		height: 100%;
		-webkit-box-flex: 1;
		-webkit-flex: 1;
		-ms-flex: 1;
		flex: 1;
		overflow-y: auto;
		overflow-x: hidden;
		-webkit-overflow-scrolling: touch;
		position: relative;
		margin-top: 0;
	}

	.aui-navBar {
		height: 44px;
		position: relative;
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		z-index: 1002;
		background: #f7f7f7;
	}

	.b-line {
		position: relative;
	}

	.b-line:after {
		content: '';
		position: absolute;
		z-index: 2;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 1px;
		border-bottom: 1px solid #e2e2e2;
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
		-webkit-transform-origin: 0 100%;
		transform-origin: 0 100%;
	}

	.aui-navBar-item {
		height: 44px;
		min-width: 25%;
		-webkit-box-flex: 0;
		-webkit-flex: 0 0 25%;
		-ms-flex: 0 0 25%;
		flex: 0 0 25%;
		padding: 0 0.9rem;
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-webkit-align-items: center;
		-ms-flex-align: center;
		align-items: center;
		font-size: 0.7rem;
		white-space: nowrap;
		overflow: hidden;
		color: #353535;
		position: relative;
	}

	.aui-navBar-item:first-child {
		-webkit-box-ordinal-group: 2;
		-webkit-order: 1;
		-ms-flex-order: 1;
		order: 1;
		margin-right: -25%;
		font-size: 0.9rem;
		font-weight: bold;
	}

	.aui-navBar-item:last-child {
		-webkit-box-ordinal-group: 4;
		-webkit-order: 3;
		-ms-flex-order: 3;
		order: 3;
		-webkit-box-pack: end;
		-webkit-justify-content: flex-end;
		-ms-flex-pack: end;
		justify-content: flex-end;
	}

	.aui-center {
		-webkit-box-ordinal-group: 3;
		-webkit-order: 2;
		-ms-flex-order: 2;
		order: 2;
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: center;
		-webkit-justify-content: center;
		-ms-flex-pack: center;
		justify-content: center;
		-webkit-box-align: center;
		-webkit-align-items: center;
		-ms-flex-align: center;
		align-items: center;
		height: 44px;
		width: 50%;
		margin-left: 25%;
	}

	.aui-center-title {
		text-align: center;
		width: 100%;
		white-space: nowrap;
		overflow: hidden;
		display: block;
		text-overflow: ellipsis;
		font-size: 0.95rem;
		color: #333;
	}

	.icon {
		width: 20px;
		height: 20px;
		display: block;
		border: none;
		float: left;
		background-size: 20px;
		background-repeat: no-repeat;
	}

	.aui-flex {
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-align: center;
		-webkit-align-items: center;
		align-items: center;
		padding: 30rpx 30rpx;
		position: relative;
	}

	.aui-flex-box {
		-webkit-box-flex: 1;
		-webkit-flex: 1;
		flex: 1;
		min-width: 0;
		font-size: 14px;
		color: #333;
	}

	.aui-flex-triangle {
		position: relative;
		font-size: 14px;
		padding-right: 15px;
	}

	.aui-flex-triangle:before {
		content: '';
		width: 0;
		height: 0;
		border-width: 5px 0px 5px 8px;
		border-style: solid;
		border-color: transparent transparent transparent #7b7b7b;
		position: absolute;
		top: 6px;
		right: 0;
		border-radius: 1;
	}

	.aui-choice-white {
		/* background: #fff; */
	}

	.aui-order-box {
		padding: 10px 20px;
	}

	.aui-flex-goods {
		margin-right: .8em;
		width: 80px;
		height: 80px;
		line-height: 80px;
		text-align: center;
	}

	.aui-flex-goods img {
		width: 100%;
		max-height: 100%;
		vertical-align: top;
	}

	.aui-flex-default {
		background: #f3f1f1;
	}

	.aui-flex-default h2 {
		font-size: 14px;
		width: auto;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		word-wrap: normal;
		word-wrap: break-word;
		word-break: break-all;
		padding-bottom: 5px;
	}

	.aui-flex-default p {
		color: #999999;
		font-size: 12px;
	}

	.aui-flex-clear {
		padding: 0;
		margin-top: 20px;
	}

	.aui-flex-clear .aui-flex-box {
		color: #f21956;
		font-weight: bold;
	}

	.aui-mar15 {
		margin-bottom: 15px;
	}

	.aui-flex-triangle-clear:before {
		border-color: #fff;
	}

	.aui-flex-box h2 {
		font-size: 16px;
		padding-bottom: 5px;
	}

	.aui-flex-box h3 {
		font-size: 14px;
		padding-bottom: 5px;
	}

	.aui-flex-box p {
		font-size: 12px;
		color: #999;
		line-height: 1.2;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
	}

	.aui-bar-footer {
		line-height: 52px;
		height: 52px;
		background: #fff;
		box-shadow: 0 -2px 10px #ddd;
		position: fixed;
		z-index: 999;
		bottom: 0;
		left: 0;
		width: 100%;
	}

	.aui-btn-button {
		background: #f21956;
		padding: 0 25px;
		color: #fff;
		font-size: 14px;
	}

	.aui-bar-footer .aui-flex {
		padding: 0;
	}

	.aui-bar-footer .aui-flex-box {
		padding-left: 15px;
	}

	.aui-bar-footer .aui-flex-box span {
		font-style: normal;
		color: #f21956;
	}

	.cnt {
		padding-top: 1px;
		color: #e61111;
		position: relative;
		line-height: 22px;
		font-size: 14px;
		font-weight: 500;
	}

	.popup-box {
		padding-bottom: 50rpx;
		padding-top: 50rpx;
	}

	.popup-item {
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		font-size: 33rpx;
	}

	.discount_info {
		border-bottom: 1px solid black;
		border-left-width: 0;
		border-top-width: 0;
		border-right-width: 0;
		width: 50px;
		height: 30px;
		text-align: center;
		padding-left: 15px;
	}

	.swipe-content {
		display: flex;
		flex-direction: row;
		background: #fff;
		border-bottom: 1rpx solid #eee;
		line-height: 35px;
	}

	.slot-content2 {
		font-size: 28rpx;
		/* color: #bcbcbc; */
		text-align: left;
		width: 93%;
		margin: 0 auto;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
	}

	.slot-content3 {
		font-size: 28rpx;
		/* color: #bcbcbc; */
		text-align: left;
		width: 93%;
		margin: 0 auto;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
	}

	.slot-content3 div {
		padding-top: 30rpx;
	}

	.policy {
		font-size: 21rpx;
		color: #9d9d9d;
		text-align: center;
	}

	.policy span {
		font-weight: bold;
		text-decoration: underline;
	}
</style>
